<!DOCTYPE html>

<!--
   Google HTML5 slide template

   Authors: Luke Mahé (code)
   Marcin Wichary (code and design)
   
   Dominic Mazzoni (browser compatibility)
   Charles Chen (ChromeVox support)

   URL: http://code.google.com/p/html5slides/
  -->

<html>
  <head>
    <title>Presentation</title>

    <meta charset='utf-8'>
    <script
       src='slides.js'></script>
  </head>
  
  <style>
    /* Your individual styles here, or just use inline styles if that’s
    what you want. */
    
    
  </style>

  <body style='display: none'>
    
    <section class='slides layout-regular template-io2011'>
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->
      
      
      
      <article class='biglogo'></article>

      <article class="nobackground">
        <p style="margin-top: 15px;">
          <img src="images/logo_oflute.png" style="height: 350px">
        </p>

        <h3 style="margin-top: 20px">Reconocimiento de señales aplicado
          <br>
          al aprendizaje de la flauta dulce</h3>
        <p>
          José Tomás Tocino García
        </p>
        <p class="smaller">
          Ingeniería Técnica en Informática de Sistemas     
          <br>
          Septiembre de 2011
        </p>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Índice</h3>
        <ul>
          <li>Introducción</li>
          <li>Descripción</li>
          <li>Calendario</li>
          <li>Fundamentos teóricos</li>
          <li>Desarrollo</li>
          <li>Herramientas</li>
          <li>Conclusiones y difusión</li>
          <li>Bibliografía</li>
        </ul>
        
      </article>

      <!-- ############################################################# -->            
      <article>
        <h2>Introducción</h2>
      </article>

      <!-- ############################################################# -->      
      <!-- <article>
        <h3>Contexto social</h3>
        <ul class="build">
          <li>Jóvenes en plena simbiosis con las nuevas tecnologías.</li>
          <li>Las TIC están llegando a los centros educativos.</li>
          <li>Técnicas docentes basadas en recursos multimedia.</li>
        </ul>
      </article> -->

      <!-- ############################################################# -->            
      <article class='fill'>
        <h3>Contexto social - Escuela TIC 2.0</h3>
        <p>
          <img src='images/aulatic_2.jpg'>
        </p>
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h3>Concepción del proyecto</h3>
        <div class="build">
          <p><b>Idea:</b><br> hacer un juego educativo</p>
          <p><b>Primera cuestión:</b><br> ¿qué asignatura se puede beneficiar?</p>
          <p style="margin-top: 60px; font-size: 50px"><b>Música</b></p>
          <p class="blue" style="margin-top: 40px; font-size:
                                 50px"><b>Aprendizaje de la flauta dulce</b></p>
        </div>
      </article>

      <!-- ############################################################# -->            
      <article>
        <div class="build" style="margin-top: 0px">
            <h3>Objetivos</h3>
            <ul style="margin-top: 10px">
              <li>Módulo de <b class="blue">análisis de sonido</b>.</li>
              <li>Sistema de interpretación de <b class="blue">canciones</b>.</li>
              <li>Sistema de <b class="blue">lecciones</b> ampliable.</li>
              <li>Interfaz de usuario <b class="blue">amigable y fluida.</b></li>            
            </ul>        
            <h3 style="margin-top: 50px">Motivaciones</h3>
            <ul style="margin-top: 10px">
              <li>Aprender sobre <b class="blue">programación de audio y DSP</b> (procesamiento digital de señales).</li>
              <li>Ampliar conocimientos sobre <b class="blue">desarrollo de videojuegos</b>.</li>
              <li>Aportar al <b class="blue">software libre</b>.</li>         
            </ul>
        </div>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h2>Descripción</h2>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h3>oFlute</h3>
        <p>
          <img class="centered" src="images/imagen_menuPrincipal.png" style="width:400px">
        </p>
        <p class="centered">Herramienta lúdico-educativa para <br>el aprendizaje de
          la flauta dulce.</p>
        <p class="centered">Interacción del alumno con la flauta en tiempo
          real.</p>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h3>Analizador de notas</h3>
        <p>
          <img class="centered" src="images/imagen_seccionAnalizador.png" style="width:550px">
        </p>
        <p class="centered">Analiza las notas en tiempo real, de forma individual</p>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h3>Motor de lecciones</h3>
        <p style="margin-top: 55px">
          <img class="centered" src="images/imagen_seccionLecciones.png" style="width:800px">
        </p>
        <p class="centered">Motor de lecciones ampliable.</p>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h3>Motor de canciones</h3>
        <p style="margin-top: 55px">
          <img class="centered" src="images/imagen_seccionCanciones.png" style="width:800px">
        </p>
        <p class="centered">Motor de canciones, permite la
          interpretación interactiva de partituras.</p>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h2>Calendario</h2>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h3>Planificación - Desarrollo iterativo</h3>
        <ol class="build">
          <li>Adquisición de base de conocimientos.</li>
          <li>Desarrollo de analizador básico.</li>
          <li>Interfaz gráfica de usuario.</li>
          <li>Motor de lecciones.</li>
          <li>Motor de canciones.</li>
        </ol>
      </article>

      <!-- ############################################################# -->            
      <article>
        <h3>Diagrama de Gantt</h3>
        <img src="images/gantt.png" style="margin-left: -25px; width: 835px; margin-top: 25px">
      </article>

      <!-- ############################################################# -->            
      <article>
        <h2>Fundamentos teóricos</h2>
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h3>El sonido</h3>
        <p class="centered">El <b>sonido</b> es una vibración en forma de onda.</p>
        <p><img src="images/onda.png" class="centered" style="width: 700px"></p>
        <ul>
          <li><b>Frecuencia:</b> oscilaciones por unidad de tiempo.</li>
          <li><b>Amplitud:</b> energía que transporta la onda.</li>
          <li><b>Fase:</b> desplazamiento respecto del origen.</li>
        </ul>
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h3>Descomposición de sonidos</h3>
        <div class="build centered">
          <p>Los sonidos no suelen ser ondas puras, <br>se componen de <b>parciales</b>.</p>
          <p><b>Frecuencia fundamental:</b> menor de los parciales. <br>Dicta
            la <b>altura</b> general del sonido.</p>
          <p>Los <b>armónicos</b> son parciales múltiplos de la frecuencia
            fundamental, enriquecen y caracterizan el sonido.</p>
          <p style="font-size: 40px; line-height:
                    50px"><b class="red">Objetivo:</b> descomponer el sonido para obtener
            la <b class="blue">frecuencia fundamental</b>.</p>
        </div>
      </article>
      
      <!-- ############################################################# -->      
      <article class="nobackground">
        <img src="images/descompo1.png" style="margin-left: -25px; width: 835px; margin-top: -10px">
      </article>
      
      <!-- ############################################################# -->      
      <article class="nobackground">
        <img src="images/descompo2.png" style="margin-left: -25px; width: 835px; margin-top: -10px">
      </article>
      
      <!-- ############################################################# -->      
      <article class="nobackground">
        <img src="images/descompo3.png" style="margin-left: -25px; width: 835px; margin-top: -10px">
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h3>Herramientas de análisis armónico</h3>
        
        <div class="build centered">
          <p>Trabajan en el <b class="blue">dominio de la frecuencia</b>.</p>
          <p>La <b class="blue">transformada de Fourier</b> es la más conocida: descompone
            una señal en sus componentes senoidales.</p>          
          <p>Datos discretos: <b class="blue">DFT - Discrete Fourier Transform</b>.</p>
          <p>Algoritmo más habitual: <b class="blue">FFT - Fast Fourier Transform</b>.</p>
        </div>
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h2>Desarrollo</h2>
      </article>
      
      <!-- ############################################################# -->      
      <article>        
        <h1>Objetivo:</h1>
        <h3 style="margin-top: 20px">Desarrollar un módulo que capture el sonido
          del micrófono, lo analice y detecte la nota que se está tocando.</h3>
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <img src="images/esq_analizador.png" style="margin-left: -25px; width: 835px; margin-top: -10px">
      </article>
      
      <!-- ############################################################# -->      
      <article>        
        <h1>Objetivo:</h1>
        <h3 style="margin-top: 20px">Cargar y usar fuentes TrueType en oFlute</h3>
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h3>TrueType</h3>
        <img class="centered" src="images/diagrama_fuentes.png" style="width: 600px;">
        <ul style="margin-top: 20px">
          <li>Formato <b>estándar para fuentes</b>.</li>
          <li>Escalado sin pérdida.</li>
        </ul>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Gosu</h3>
        <p class="centered" style="font-size: 35px">oFlute utiliza <b>Gosu</b>
          como sistema gráfico.</p>
        <img class="centered" src="images/logo_gosu.png" style="width: 350px; margin-top: 20px">
        <ul style="margin-top: 20px">
          <li><b>Open Source</b>.</li>
          <li>Aceleración por hardware.</li>
          <li>Desarrollo <b>ágil</b>.</li>
          <li>Comunidad <b>muy activa</b>.</li>
        </ul>
      </article>
      
      

      <!-- ############################################################# -->      
      <article>
        <h3>TrueType en Gosu</h3>

        <div class="build">
          <p><b class="blue">Objetivo:</b> cargar y usar fuentes <b>TrueType</b> en Gosu</p>

          <p><b class="green">Solución:</b> implementar un <b>módulo propio</b>
            para fuentes TrueType.</p>

          <p>El módulo se liberó. Ahora forma <b>parte oficial</b> de Gosu.</p>

<pre>// Used for custom TTF files
// Adapted from customFont class by Jose Tomas Tocino Garcia
class SDLTTFRenderer : boost::noncopyable
</pre>
          </div>
      </article>

      <!-- ############################################################# -->      
      <article>        
        <h1>Objetivo:</h1>
        <h3 style="margin-top: 20px">Conseguir interfaces amigables y dinámicas</h3>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Interfaces con animaciones dinámicas</h3>
        
        <div class="build">
          <p><b class="blue">Objetivo:</b> conseguir interfaces amigables y fluidas.</p>

          <p><b class="green">Solución:</b> diseño de <b>sistema de
              animaciones dinámicas</b></p>

          <p>Movimientos de <b>aceleración, deceleración, uniformes</b>, etc. sobre un
            número arbitrario de <b>atributos</b>.
            
            <img src="images/animacion.png" class="centered" style="margin-top: 40px"></p>

          <!--<p>Basadas en las ecuaciones de Robert Penner, liberadas bajo licencia
            BSD.</p>-->
        </div>
      </article>

      <!-- ############################################################# -->      
      <article>        
        <h1>Objetivo:</h1>
        <h3 style="margin-top: 20px">Internacionalización de oFlute</h3>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Internacionalización de Gosu</h3>

        <div class="build">
          <p><b class="blue">Objetivo:</b> internacionalizar el proyecto de manera fácil.</p>

          <p><b class="green">Solución:</b> utilizar un sistema estándar, <b>GNU Gettext</b>, 
          el más usado en proyectos libres.</p>

          <p>Cualquiera puede traducir oFlute.</p>
          <p class="centered" style="font-size: 40px; margin: 50px auto;">Analizador de notas ⇔ ノートアナライザー</p>
          <p>Publicación de <i>Traducción de proyectos con GNU Gettext en 15
              minutos</i>.</p>
        </div>
      </article>    

      <!-- ############################################################# -->      
      <article>
        <h2>Herramientas</h2>
      </article>

      <!-- ############################################################# -->      
      <article>
        <!-- <h3>Herramientas</h3> -->

        <h3 style="margin-top: 20px; font-size: 40px">Lenguaje de programación: <span class="blue">C++</span></h3>
        
        <ul style="margin-top: 20px">
          <li> Mayor familiaridad.</li>
          <li>Muy eficiente.</li>
          <li>Gran cantidad de herramientas y soporte.</li>
        </ul>

        <h3 style="margin-top: 70px; font-size: 40px">Sistema gráfico: <span class="blue">Gosu</span></h3>
        <img src="images/logo_gosu.png" style="width: 250px; position: absolute; left: 570px; top: 380px">
        <ul style="margin-top: 20px">
          <li>Multiplataforma.</li>
          <li>Orientada a objetos.</li>
          <li>Aceleración gráfica por hardware.</li>
        </ul>

      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Herramientas</h3>

        <h3 style="margin-top: 20px; font-size: 40px">Propósito general: <span class="blue">Boost</span></h3>
        
        <p><b class="blue">Bibliotecas para C++</b>, libres,
          muy populares y con gran madurez. Varias forman parte del nuevo <b class="blue">estándar
            C++11.</b></p>

        <img src="images/Boost.png" class="centered" style="margin: 30px auto">
            
            
        <div style="float: left; width: 50%">
          <ul style="margin-top: 20px">
            <li>Punteros inteligentes.</li>
            <li>Hilos.</li>
            <li>Conversiones.</li>            
          </ul>
        </div>
        <div style="float: left; width: 50%">
          <ul style="margin-top: 20px">
            <li>Expresiones regulares.</li>
            <li>Programación funcional.</li>
            <li>Asertos estáticos.</li>
          </ul>
        </div>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Otras herramientas</h3>
        <img src="images/nube_herramientas.png" style="position:absolute; left: 350px">
        <ul>    
          <li>PulseAudio</li>
          <li>PugiXML</li>
          <li>KissFFT</li>
          <li>GNU GCC y GDB</li>
          <li>LaTeX</li>
          <li>BoUML</li>
          <li>Planner</li>
          <li>ImageMagick</li>
          <li>...</li>            
        </ul>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h2>Conclusiones y difusión</h2>
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Conclusiones del proyecto</h3>

        <!-- <h3 style="margin-top: 20px; font-size: 40px">A nivel de proyecto</h3> -->
        <ul class="sep1 build">
            <li>Proyecto de gran <b class="blue">envergadura</b>.</li>
            <li>Todos los <b class="blue">objetivos</b> completados.</li>
            <li>Mucho <b class="blue">conocimiento</b> adquirido.</li>
            <li>Aporte a la comunidad.</li>
            <li>Comparable a <b class="blue">proyectos comerciales</b>.
            <img src="images/comerciales.png" class="centered"></li>
        </ul>
        
        
        <!--
        <ul style="margin-top: 10px">
          <li><b class="blue">Módulo de análisis</b> de notas eficiente.</li>
          <li>Sistema de <b class="blue">canciones</b> efectivo.</li>
          <li>Sistema de lecciones <b class="blue">muy completo</b>.</li>
          <li>Interfaz <b class="blue">agradable y fluida</b>.</li>
        </ul>
        -->
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Posibles mejoras</h3>
        
        <ul class="sep1">
          <li><b class="green">Extender</b> el sistema de lecciones.</li>
          <li>Mejorar <b class="green">jugabilidad</b> de las canciones.</li>
          <li>Portar el juego a <b class="green">otras plataformas</b>.</li>
        </ul>
        
      </article>
      
      <!-- ############################################################# -->      
      <article>
        <h3>Difusión</h3>

        <img src="images/difusion.png" style="margin-left: 20px">
      </article>

      <!-- ############################################################# -->      
      <article>
        <h3>Aporte a la comunidad</h3>

        <ul style="margin-top: 20px">
            <li><b>Talleres:</b> Boost, GNU Gettext y Gosu.</li>
            <li style="margin-top: 30px"><b>Documentación:</b> tutorial de GNU Gettext, blog.</li>
            <li style="margin-top: 30px"><b>Proyectos:</b> <b class="blue">Freegemas</b>, derivado de oFlute.
                <img src="images/imagen_freegemas2.png" style="position: absolute; left: 500px; margin-top: 60px; width: 300px">
                <ul>
                    <li>Multiplataforma.</li>
                    <li><b>Serie de artículos</b> <br>en Linux Magazine.<br><img src="images/logo_linux_magazine.png" style="margin-top: 20px"></li>
                    <li style="margin-top: -10px">Incluido en <b>Guadalinex</b>.</li>
                </ul>
            </li>
        </ul>

      </article>

      <!-- ############################################################# -->      
      
      <!-- <article>
        <h3>Proyectos derivados: Freegemas</h3>
        <p style="margin-top: 10px">A partir del código de
          oFlute: <b class="blue">Freegemas</b>, clon libre y multiplataforma de
          Bejeweled, para <b>Windows y Linux</b>.</p>
        <p>
          <img class="centered" src="images/freegemas.png" style="width:800px">
        </p>  

        <ul style="margin-top: 14px">
          <li><b class="blue">Tres publicaciones</b> en Linux Magazine.</li>
          <li><b class="blue">Inclusión oficial</b> en Guadalinex v8.</li>
        </ul>
      </article> -->

      <!-- ############################################################# -->      
      <article>
        <img src="images/cusl.png" class="centered" style="margin: 20px auto 0px">
        <ul style="margin-top: 15px">
          <li><b class="blue">Mención especial</b> a nivel nacional.</li>
          <li><b class="blue">Mejor proyecto libre</b> de innovación UCA.</li>
        </ul>

        <img src="images/guadalinex.png" class="centered" style="margin-top: 70px">
        <ul style="margin-top: 15px">
          <li>oFlute se encuentra en los <b class="blue">repositorios de Guadalinex</b>.</li>
        </ul>
        
        
      </article>

      <!-- ############################################################# -->      
      <article>
        <h2>Bibliografía</h2>
      </article>    

      <!-- ############################################################# -->      
      <article>
        <ul style="margin-top: 20px; list-style-type: none; list-style-image:url(images/bullet_libro.png)">
          <li><b class="black">Comp.DSP Newsgroup</b><br>
            <a hreF="http://www.dsprelated.com/compdsp.php">http://www.dsprelated.com/compdsp.php</a></li>
          <li><b class="black">Learning UML 2.0</b><br>
            Miles & Hamilton, O’Reilly, 2006</li>
          <li><b class="black">Digital Signal Processing, a Computer Science Perspective</b><br>
            Jonathan Stein, Wiley-Interscience, 2000</li>
          <li><b class="black">Understanding Digital Signal Processing</b><br>
            Richard Lyons, Prentice Hall, 2001.</li>
          <li><b class="black">Patrones de Diseño</b><br>
            Erich Gamma y asociados., Addison Wesley, 1994</li>    
        </ul>
      </article>

      <!-- ############################################################# -->      
      <article class="nobackground">
        <img src="images/logo_oflute.png" class="centered" style="height: 400px; margin-top: 70px">
        <p class="centered">
          <b>Demostración</b>
        </p>
      </article>

      <!-- ############################################################# -->      
      <article class="nobackground">
        <img src="images/logo_oflute.png" class="centered" style="height: 400px; margin-top: 30px">
        <p class="centered">
          <b style="font-size: 40px;">Gracias por su atención</b>
        </p>

        <p class="centered" style="margin-top: 10px">
          ¿Preguntas?
        </p>

        <p class="centered">
          <a href="http://oflute.googlecode.com">oflute.googlecode.com</a>
        </p>
      </article>

    </section>

  </body>
</html>
